<!-- 在线用户列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert
                type="info"
                title="基于活动 Token 的统计方式可能比实际数据略有延迟，此列表仅供参考"
                style="margin: 10px 0; "
                show-icon>
            </el-alert>
            <!-- <h4 class="c-title">在线用户</h4>-->
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="7em" @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="用户账号id：" v-model="state.p.keyword"></in-input>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
            </el-form>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="账号id" prop="userId" width="120px"></td-info>
                <!-- <sa-td name="账号信息" prop="username,avatar" type="user-avatar"></sa-td> -->
                <td-info name="账号信息">
                    <template #default="s">
                        <img
                            :src="s.row.avatar" @click="sa.showImage(s.row.avatar, '400px', '400px')"
                            class="td-img" style="vertical-align: middle; margin-right: 5px;" alt="img" />
                        <el-link type="primary" @click="getUserInfo(s.row)">
                            <span style="color: #333; font-size: 12px;">{{ s.row.username }}</span>
                        </el-link>
                    </template>
                </td-info>
                <td-info name="会话创建于">
                    <template #default="s">
                        <span>{{ sa.forDate(s.row.createTime, 2) }} - </span>
                        <b style="color: green;">{{ sa.forDate2(s.row.createTime) }}</b>
                    </template>
                </td-info>
                <td-info name="会话失效于">
                    <template #default="s">
                        <p v-if="s.row.timeout === -1">永不过期</p>
                        <p v-else>
                            <span>{{ sa.forDate(new Date().getTime() + s.row.timeout * 1000, 2) }} - </span>
                            <b style="color: green;">{{ sa.forDate2(new Date().getTime() + s.row.timeout * 1000) }}</b>
                        </p>
                    </template>
                </td-info>
                <td-info name="登录数量">
                    <template #default="s">
                        <span style="cursor: pointer;" @click="openOnlineInfo(s.row)">
                            <el-tag size="small" effect="plain" disable-transitions>{{ s.row.tokenSignList && s.row.tokenSignList.length }} 个客户端</el-tag>
                        </span>
                    </template>
                </td-info>
                <el-table-column label="操作" fixed="right" width="280px">
                    <template #default="s">
                        <el-button class="c-btn" type="success" plain icon="el-icon-View" @click="openOnlineInfo(s.row)">查看</el-button>
                        <el-button class="c-btn" type="warning" plain icon="el-icon-Delete" @click="kickout(s.row)">踢下线</el-button>
                        <el-button class="c-btn" type="danger" plain icon="el-icon-Delete" @click="logout(s.row)">强制注销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sys-user-online-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件
        keyword: '', // 关键字 
        pageNo: 1, // 当前页 
        pageSize: 10, // 页大小 
    },
    dataCount: 0, // 数据总数 
    dataList: [],  // 数据表格 
})

// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 查找数据 ------------------
const f5 = function() {
    sa.ajax('/SysUserOnline/getList', state.p, function(res) {
        state.dataList = res.data;	// 数据
        state.dataCount = res.dataCount;
    });
};

// 查看
const getUserInfo = function(data) {
    sa.showModel('数据详情-' + data.userId, import('../sys-user/sys-user-info.vue'), {id: data.userId});
};
// 打开登录详情 
const openOnlineInfo = function(data) {
    sa.showModel('数据详情-' + data.userId, import('./sys-user-online-info.vue'), {loginId: data.userId});
};

// 强制注销，根据userId 
const logout = function(data) {
    let str = '将账号 ' + data.userId + ' 的会话<b style="color:green;">（' + data.tokenSignList.length + ' 个客户端）</b>强制注销？';
    sa.confirm(str, { isHtmlFragment: true }, function() {
        sa.ajax('/SysUserOnline/logout?loginId=' + data.userId, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('注销成功');
        });
    });
};

// 踢人下线，根据userId 
const kickout = function(data) {
    let str = '将账号 ' + data.userId + ' 的会话<b style="color:green;">（' + data.tokenSignList.length + ' 个客户端）</b>踢下线？';
    sa.confirm(str, { isHtmlFragment: true }, function() {
        sa.ajax('/SysUserOnline/kickout?loginId=' + data.userId, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('踢出成功');
        });
    });
};

// 对外开放函数 
defineExpose({f5})

</script>

<style scoped lang="scss">
.el-tag{border-radius: 1px;}
</style>
